<template>
	<transition name="fade">
		<div class="toast"  v-if="show">
			<div class="loader-04"></div>
		</div>
	</transition>

</template>

<script>
	export default {
		props: {
			duration: {
				type: String,
				default: "1s" //默认1s
			},
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		mounted()
		{
			
			
		}
	};
</script>

<style lang="scss" scoped>
	.toast {
		position: fixed;
		top: 40%;
		left: 50%;
		margin-left: -10vw;
		padding: 2vw;
		font-size: 4vw;
		color: #fff;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 4px;
		z-index: 999;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: 0.3s ease-out;
	}

	.fade-enter {
		opacity: 0;
		transform: scale(1.2);
	}

	.fade-leave-to {
		opacity: 0;
		transform: scale(0.8);
	}

	.loader-04 {
		border: 1px solid currentcolor;
		border-radius: 50%;
		animation: 1s loader-04 linear infinite;
		position: relative;
		width: 16vw;
		height: 16vw;
	}

	.loader-04:before {
		content: '';
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		top: -.2em;
		left: 50%;
		border: .2em solid currentcolor;
		border-radius: 50%;
	}

	@keyframes loader-04 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
</style>
